<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>联系我们</title>
		<link th:href="@{/css/contactus/contactus.css}" rel="stylesheet" type="text/css" />
		<script th:src="@{/js/contactus/jquery-3.2.1.js}"></script>
		<script th:src="@{/js/contactus/jquery-validator/jquery.validate.min.js}"></script>
		<script th:src="@{/js/contactus/jquery-validator/messages_cn.js}"></script>
		<script th:src="@{/assets/layer/layer.js}"></script>
		<link rel="stylesheet" th:href="@{/css/indexCss/base.css}" type="text/css" />
		<link rel="stylesheet" th:href="@{/css/indexCss/index.css}" type="text/css" />

		<script>
		/*	$().ready(function() {
		    $("#commentForm").validate();
		});*/

			$(function() {
				$("header").load("/eolane/f/t/header6");
				$("footer").load("/eolane/f/t/footer");
				$(".rightxuanfu").load("/eolane/f/t/right");
			})
		</script>

		<style type="text/css">
			.error {
				font-size: 12px;
				color: red;
		</style>
	</head>
	<body>
		<header style="background-color: white"></header>
		<!-- <iframe name="" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="100%" height="116" src="common/header.html"></iframe> -->
		<div class="inside-inner">
			<img th:src="@{/images/contactus/inner-banner.jpg}" alt='Leader in PCB & Technical Parts' />
		</div>
		<div class="sep-container">
			<div class="sep-primary">
				<div style="margin-top: 30px;">
					<h2 style="font-size:18px; line-height: 200%;">信息咨询</h2>
					<p>请在以下表格中填写您的联系方式和需要咨询的信息,我们将尽快答复您。</p>
				</div>

				<!-- multipart/form-data  不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。 -->
				<form class="cmxform" id="commentForm" enctype="multipart/form-data" method="post">
					<div class="formblocks">
						<div class="title">个人信息</div>
						<div class="frows">
							<div class="datatextarea">
								<select name='mrs' style="width: 240px; height:24px;font-size: 16px;">
									<option value="先生">先生</option>
									<option value="女士">女士</option>
								</select>
							</div>
							<div class="dataalert"></div>
						</div>
						<div class="frows">
							<div class="datatextarea"><input name='surname' id='lastname' class="dta" type="text" placeholder="姓" required></div>
							<div class="dataalert">*</div>
						</div>
						<div class="frows">
							<div class="datatextarea"><input class="dta" name='name' id='firstname' type="text" placeholder="名"
								 required></div>
							<div class="dataalert">*</div>
						</div>
						<div class="frows">
							<div class="datatextarea"><input class="dta" name='telephone' type="digits" placeholder="电话" required></div>
							<div class="dataalert">*</div>
						</div>
						<div class="frows">
							<div class="datatextarea"><input class="dta" name='email' id='e-mail' type="email" placeholder="邮箱" required></div>
							<div class="dataalert">*</div>
						</div>
					</div>

					<div class="formblocks">
						<div class="title">联系地址</div>
						<div class="frows">
							<div class="datatextarea"><input class="dta" name='company' id='company' type="text" placeholder="公司名称" required></div>
							<div class="dataalert">*</div>
						</div>
						<div class="frows">
							<div class="datatextarea" style="margin-top: 30px;"><input class="dta" name='website' type="url" placeholder="网址"></div>
							<div class="dataalert" style="margin-top: 30px;"></div>
						</div>
						<div class="frows">
							<div class="datatextarea" style="margin-top: 30px;"><input class="dta" name='address' type="text" placeholder="地址"></div>
							<div class="dataalert" style="margin-top: 30px;"></div>
						</div>
					</div>
					<div class="formblocks height">
						<div class="title">留言</div><div class="dataalert" style="margin-top: -20px;margin-left: 36px">*</div>
						<div class="frows">
							<div class="datatextarea" style="height:80px;margin-top: 14px"><textarea name='message' cols="" class="dta" placeholder="留言"
								 style=" height:180px; width:360px; font-family:Arial; line-height:22px; resize: none" rows="" required></textarea></div>
						</div>
					</div>
					<div class="fullline txa-r" style="clear: both; float: right;">
						<input type="button"  value="提交" onclick="sentMessage()" class="submitIt" />
					</div>
				</form>
			</div>
		</div>
		<footer style="clear:both;"></footer>
		<div class="rightxuanfu"></div>
	</body>
	<!-- <iframe name="" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="100%" height="270" src="common/footer.html"></iframe> -->
	<script th:inline="javascript">
		/*<![CDATA[*/
		var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
		/*]]>*/
	</script>

	<script type="text/javascript">

		function sentMessage() {
			//验证表单数据
			if ($("#commentForm").valid()) {
				//获取数据
				var data = $("#commentForm").serialize();
				$.ajax({
					url: contextPath + '/f/t/contactus1',
					data: data,
					type: "post",
					timeout : 40000,
					beforeSend : function() {
						var index = layer.load(2, {time: 2*1000});
					},
					complete : function() {

					},
					success: function (msg) {
						if(msg == "101"){
							layer.confirm('发送成功，我们将尽快和您取得联系！', {
								btn: ['确定'] //按钮
							}, function(){
								window.location.href =  contextPath + "/f/t/showmain";
							});
						} else{
							layer.alert('发送失败！', {icon: 2});
						}
					}
				});
			}
		}
	</script>
</html>
